<template>
  <div class="login">
    <!-- 登录表单 -->
    <div class="login-container">
      <!-- 头像部分 -->
      <div class="avatar-box">
        <img src="../../assets/logo.png" alt="">
      </div>
      <!-- 表单部分 -->
      <el-form ref="loginformRef" class="form" :model="loginForm" :rules="loginFormRules">
        <!-- 用户名 -->
        <el-form-item prop="userName">
        <!-- 引入阿里字体图表文件到css,然后再main.js导入，使用时添加基类和字体本身的类 -->
          <el-input prefix-icon="iconfont icon-denglu1" v-model="loginForm.userName"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="passWord" >
          <el-input prefix-icon="iconfont icon-mima" v-model="loginForm.passWord" type="password"></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="loginOn">登录</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
         
       
      </el-form>
    </div>
  </div>
</template>
<script>
//导入点击登录请求的数据
import {loginRequest} from '../../networks/login'
export default {
  //使用formui组件进行数据绑定，1通过给form绑定一个数据对象，存储不同表单类型的数据
  //使用v-model双向绑定到数据对象的属性中，密码加type="password"
  //进行数据验证 1 为表单添加验证规则对象，添加完成后对el-item绑定规则
  name:'Login',
  data() {
    return {
      //表单数据对象
      loginForm:{
        userName:'admin',
        passWord:'123456',
      },
      //表单验证规则对象
      loginFormRules:{
        //验证登录
        userName:[
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],
        //验证密码
        passWord:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }],
      }
    }
  },
  methods: {
    reset(){
      //指向的时vue实例
      console.log(this);
      // 拿到表单组件然后重置
      this.$refs.loginformRef.resetFields();
    },
    loginOn(){
      //注意，此时validate()中要用到this，取到的时vuecomponent,如果用传统的fun(),要改变this指向
      this.$refs.loginformRef.validate(function(valid){
        // 验证格式
        if(valid){
          
          //携带表单数据发送请求
          loginRequest(this.loginForm).then(res=>{
            console.log(res);
            //返回后根据status判段登录是否成功
            if(res.meta.status!==200){
              return this.$message.erro("登录失败");

            }else{
              this.$message.success("登录成功");
              //1保存服务器返回的token到sessionStorage中
              console.log(res.data.token);
              window.sessionStorage.setItem('token',res.data.token);
              //手动进行路由跳转后台主页，路由地址是/home
              this.$router.push("/home")
            }
          });
        }else{
          return ;
        }
      }.bind(this))
    }
  },
}
</script>
<style scoped>
 .login{
   background-color: #2b4b6b;
   height:100%;
 }
 .login-container{
   width:450px;
   height: 300px;
   background-color: aliceblue;
   position: absolute;
   left: 50%;
   top:50%;
   transform: translate(-50%,-50%);
 }
 .avatar-box{
   width:130px ;
   height:130px;
   background-color: #fff;
   border-radius: 50%;
   overflow: hidden;
   padding:10px;
   box-sizing: border-box;
   position: absolute;
   left: 50%;
   transform: translate(-50%,-50%);
   box-shadow: 0 0 10px #ddd;

 }
 .avatar-box img{
   width:100%;
   background-color: #eee;
   border-radius: 50%;
 }
 .form{
   width: 100%;
   position: absolute;
   bottom: 0;
   padding: 0 20px;
   box-sizing: border-box;

 }
 .btns{
    display: flex;
   justify-content: flex-end;
 }
</style>